<template>
	<el-container style="display: flex;min-height: 100vh;">
		<el-header>头部</el-header>
		<el-container>
			<el-aside style="width: 200px;">
				<el-menu router  default-active="2" class="el-menu-vertical-demo"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-c-scale-to-original"></i>
							<span>新闻发布系统</span>
						</template>
						<el-menu-item index="/items">栏目管理</el-menu-item>
						<el-menu-item>新闻管理</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-s-tools"></i>
							<span>系统管理</span>
						</template>
						<el-menu-item index="/userInfos"><i class="el-icon-s-custom"></i>用户管理</el-menu-item>
						<el-menu-item>角色管理</el-menu-item>
						<el-menu-item>权限管理</el-menu-item>
					</el-submenu>
					
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<router-view></router-view>
				</el-main>
				<el-footer>底部</el-footer>
			</el-container>

		</el-container>

	</el-container>
</template>

<script>
	import router from '@/router'
	export default {}
</script>


<style>
	.el-header {
		height: 100px;
		background-color: #42B983;

	}

	.el-main {
/* 		background-color: #808080; */
		flex-grow: 1;
	}

	.el-footer {
		height: 100px;
		background-color: aqua;
	}

	.el-aside {
		width: 100px;
		background-color: dimgray;
	}
</style>
